<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/html" id="cashToolBar">

        <div style="float:right">
            <button class="layui-btn layui-btn-sm" lay-event="insert"><i
                    class="layui-icon">&#xe654;</i>新增</button>
            <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
        </div>

        <div class="layui-inline" style="position: relative;left: 30px;">
            <!--标签-->
            <label class="layui-form-label" style="width: 90px">银行名称</label>
            <div class="layui-input-inline">
                <input type="text" name="bankName" id="bankName" lay-verify="required"
                       autocomplete="off" placeholder="开户银行名称" class="layui-input">
            </div>
        </div>
        <div class="layui-inline" style="position: relative;left: 30px;">
            <label class="layui-form-label" style="width: 90px">存储类型</label>
            <div class="layui-input-inline">
                <select id="cashType" name="cashType" class="layui-input">
                    <option value="0"></option>
                    <option value="1">活期</option>
                    <option value="2">定期</option>
                </select>
            </div>
        </div>
        <div class="layui-inline layui-show-xs-block">
            <button class="layui-btn layui-btn-primary" lay-event="search" lay-submit="search" lay-filter="search"><i class="layui-icon">&#xe615;</i>搜索</button>
        </div>
    </script>
    <script type="text/javascript">
        layui.use(['table','form','laydate', 'layer'], function(){
            var table = layui.table;//得到layui 的table组件
            var $=layui.jquery;
            var form=layui.form;
            var laydate = layui.laydate;
            var layer = layui.layer;

            //表格的渲染  给表格加样式 加数据
            table.render({
                //指定原始 table 容器的选择器或 DOM，方法渲染方式必填
                elem: '#cash',
                //url 表格的数据来源  从数据库查询
                url:'pageCash',
                toolbar: '#cashToolBar',
                page: true,
                height:'full-20',
                limits:[5,8,10,15],
                cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                cols: [[
                     {type: 'checkbox', fixed: 'left'}
                    ,{field:'cashId', title: '现金ID', sort: true}
                    ,{field:'bankAccount', title: '银行账号',sort: true} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    ,{field:'accounName', title: '账户名称', sort: true}
                    ,{field:'bankName', title: '开户银行名称', sort: true}
                    ,{field:'cashType', title: '存储类型', templet: function(item){
                            if (item.cashType==1){
                                return '活期'
                            }else if (item.cashType==2){
                                return '定期'
                            }
                        }}
                    ,{field:'accounRate', title: '卡号利率', sort: true}
                    ,{field:'day', title: '计息期限',templet: function(item){
                            if (item.day==1){
                                return 360
                            }else if (item.day==2){
                                return 365
                            }else {
                                return 366
                            }
                        }}
                    ,{field:'openDate', title: '开户日期', sort: true}
                    ,{field:'endDate', title: '结束日期', sort: true}
                    ,{field:'cashBeiZhu', title: '备注', sort: true}
                    ,{fixed: 'right', width: 165, align:'center', toolbar: '#cashDemo'}
                ]]
            });

            table.on('toolbar(cash)',function (obj) {
                //根据事件对象 来判定点击的是哪一个案例
                if(obj.event=='insert'){
                    layer.open({
                        type:1,
                        area:['1000px','550px'],
                        content: $("#cashContent")
                    });
                }else if(obj.event=='deleteAll'){
                    var checkStatus = table.checkStatus('cash');
                    if(checkStatus.data.length==0){
                        parent.layer.msg('请先选择要删除的数据行！', {icon: 2});
                        return ;
                    }
                    var ids = "";
                    for(var i=0;i<checkStatus.data.length;i++){
                        ids += checkStatus.data[i].cashId+",";
                    }
                    parent.layer.msg('删除中...', {icon: 16,shade: 0.3,time:3000});
                    $.post('deleteCash',
                        {'ids':ids},
                        function(data){
                        var  a = data.toString();
                            layer.closeAll('loading');
                            window.location.reload();
                        }

                    );
                    return false;
                }else if(obj.event=='search') {
                    var bankName = $('#bankName').val();
                    var cashType = $('#cashType').val();
                    table.reload('cash', {
                        method: 'post',
                        page: {
                            curr: 1
                        },
                        where: {
                            'bankName': bankName,
                            'cashType': cashType,
                        }
                    });
                    laydate.render({
                        elem:'#cash'
                    });
                }
            });

            //给增加的form绑定提交事件
            form.on('submit(casForm)',function () {
                //发送ajax请求到 服务器，
                //得到表单的所有数据
                var formData= form.val("casForm");
                $.post(
                    "insertCash",
                    formData,
                    function(msg) {
                        //重新刷新表格
                        //给予提示信息，增加成功
                    });
            });
            /*修改*/
            table.on('tool(cash)',function (obj) {
                switch (obj.event) {
                    case "edit":
                        //得到选中行的数据
                        var data=obj.data;
                        //JSON.stringify(data)  拼接成JSON格式的字符串
                        var userObj=$.parseJSON(JSON.stringify(data));
                        //弹出一个修改的窗口
                        form.val("cashUpdateFrom",userObj);
                        layer.open({
                            type:1, //iframe 内嵌窗口
                            area:['1000px','550px'],
                            content: $("#cashUpdateContent")
                        });

                        break;
                    case "del":
                        layer.confirm('确定要删除吗？',function (index){
                            layer.close(index);
                            var data=obj.data;
                            $.ajax({
                                url:"deleteCash",
                                type:"post",
                                data:"ids="+data.cashId,
                                dataType:"text",
                                contentType:"application/x-www-form-urlencoded",
                            });
                            //重新刷新表格
                            table.reload('cash');
                        });
                        break;
                }
            });


            //给修改的form绑定提交事件
            form.on('submit(cashUpdateFrom)',function () {
                //发送ajax请求到 服务器，
                //得到表单的所有数据
                var formData= form.val("cashUpdateFrom");
                $.post(
                    "updateCash",
                    formData,
                    function(msg) {
                        //重新刷新表格
                        //给予提示信息，增加成功
                        alert(msg);

                    });

            });
            laydate.render({
                elem: '#test20'
            });
            laydate.render({
                elem: '#test30'
                ,theme: '#393D49'
            });
        });


    </script>
</head>
<body>



<table id="cash" lay-filter="cash"></table>
<!--表格最后一列的操作按钮的工具栏-->
<div style="display: none;" id="cashDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i
            class="layui-icon">&#xe642;</i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
            class="layui-icon">&#xe640;</i>删除</a>

</div>
     <!--增加-->

<!--  background-color: #000; -->
<div id="cashContent"
     style="display: none; height: 100%; width: 950px; text-align: center; ">
    <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用  background-color: #ffff00; background-color: #0a6aa1;-->
    <form id="casForm" lay-filter="casForm"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block; width:100%;">
        <div style=" Float: left; width: 40%;margin-left:10%" >
        <!--<div class="layui-form-item" style="text-align: center;">
            &lt;!&ndash;标签&ndash;&gt;
            <label class="layui-form-label">现金ID</label>
            <div class="layui-input-inline">
                <input type="text" name="cashId" lay-verify="required"
                       autocomplete="off" placeholder="现金ID" class="layui-input">
            </div>
        </div>-->
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">银行账号</label>
            <div class="layui-input-inline">
                <input type="text" name="bankAccount" lay-verify="required"
                       autocomplete="off" placeholder="银行账号" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">账户名称</label>
                 <div class="layui-input-inline">
                     <input type="text" name="accounName" lay-verify="required"
                    autocomplete="off" placeholder="账户名称 " class="layui-input">
                </div>
        </div>
        <div class="layui-form-item" >
            <label for="cgId" class="layui-form-label">
                <!--<span class="x-red"></span>-->开户银行名称</label>
            <div class="layui-input-inline">
                <select id="cgId" name="bankName" lay-filter="cate">
                    <option value="中国银行">中国银行</option>
                    <option value="中国农业银行">中国农业银行</option>
                    <option value="中国建设银行">中国建设银行</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">存储类型</label>
            <div class="layui-input-inline">
                <input type="radio" name="cashType" value="1" size="20px"  >活期
                <input type="radio" name="cashType" value="2"  checked="checked">定期

            </div>
        </div>
        </div>
        <!--background-color: #007DDB;-->
        <div style=" Float: left; width: 40%; margin-left:10%">
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">卡号利率</label>
            <div class="layui-input-inline">
                <input type="text" name="accounRate" lay-verify="required"
                       autocomplete="off" placeholder="卡号利率" class="layui-input">
            </div>
        </div>
        <!--<div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">计息期限</label>
                <div class="layui-input-inline">
                   <input type="text" name="day" lay-verify="required"
                   autocomplete="off" placeholder="计息期限" class="layui-input">
                </div>
        </div>-->
            <div class="layui-form-item" style="text-align: center;">
                    <label class="layui-form-label">计息期限</label>
                    <div class="layui-input-inline">
                        <select  name="day" class="layui-input">
                            <option value="0"></option>
                            <option value="1">360</option>
                            <option value="2">365</option>
                            <option value="3">366</option>
                        </select>
                    </div>
                </div>

            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">开户日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="openDate" class="layui-input" id="test20" placeholder="开户日期">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">结束日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="endDate" class="layui-input" id="test30" placeholder="开户日期">
                </div>
            </div>


            <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-inline">
                <input type="text" name="cashBeiZhu" lay-verify="required"
                       autocomplete="off" placeholder="备注" class="layui-input">
            </div>
        </div>
    </div>
            <div style="position: relative; clear: both;">
                <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
                <i class="layui-icon">&#x1005;</i>添加
            </button>
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>


<!-- 修改-->

<div id="cashUpdateContent" style="display: none; height: 100%; height: 100%; text-align: center;">
    <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用 background-color: #ffff00; background-color: #0a6aa1;-->
    <form id="cashUpdateFrom" lay-filter="cashUpdateFrom"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block; width:100%;">
        <div style=" Float: left; width: 40%; margin-left:10%">
            <div class="layui-form-item" style="text-align: center;">
                <!--标签-->
                <label class="layui-form-label">现金ID</label>
                <div class="layui-input-inline">
                    <input type="text" name="cashId" lay-verify="required"
                           autocomplete="off" placeholder="现金ID" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">银行账号</label>
                <div class="layui-input-inline">
                    <input type="text" name="bankAccount" lay-verify="required"
                           autocomplete="off" placeholder="银行账号" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">账户名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="accounName" lay-verify="required"
                           autocomplete="off" placeholder="账户名称 " class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" >
                <label for="cgId" class="layui-form-label">
                    <span class="x-red"></span>开户银行名称</label>
                <div class="layui-input-inline">
                    <select id="cgIdi" name="bankName" lay-filter="cate">
                        <option value="中国银行">中国银行</option>
                        <option value="中国农业银行">中国农业银行</option>
                        <option value="中国建设银行">中国建设银行</option>
                    </select>
                </div>

            </div>


            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">存储类型</label>
                <div class="layui-input-inline">
                    <input type="radio" name="cashType" value="1" size="20px"  >活期
                    <input type="radio" name="cashType" value="2"  checked="checked">定期

                </div>
            </div>
        </div>
        <!-- background-color: #007DDB; -->
        <div style=" Float: left; width: 40%; margin-left:10%">
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">卡号利率</label>
                <div class="layui-input-inline">
                    <input type="text" name="accounRate" lay-verify="required"
                           autocomplete="off" placeholder="卡号利率" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">计息期限</label>
                <div class="layui-input-inline">
                    <select  name="day" class="layui-input">
                        <option value="0"></option>
                        <option value="1">360</option>
                        <option value="2">365</option>
                        <option value="3">366</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">开户日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="openDate" class="layui-input" id="w" placeholder="开户日期">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">结束日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="endDate" class="layui-input" id="wh" placeholder="开户日期">
                </div>
            </div>


            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline">
                    <input type="text" name="cashBeiZhu" lay-verify="required"
                           autocomplete="off" placeholder="备注" class="layui-input">
                </div>
            </div>
        </div>
        <div style="position: relative;clear: both;">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
                <i class="layui-icon">&#x1005;</i>修改
            </button>
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>
</body>




</html>